<template>
  <div
    :element-loading-text="total"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    v-loading.fullscreen.lock="extralLoading" >
    <el-button
      size="small"
      v-for="(item,index) in Config.btnData"
      :key="index"
      :type="item.type||'primary'"
      :icon="item.icon||''"
      :loading="item.loading||false"
      @click.native="actionHandle(item)"
    >{{item.text}}</el-button>
    <!-- v-has="item.btnper?item.btnper:{}" -->
    <!-- 列表打印 -->
    <div class="fml-print-dialog"  v-if="printDialog">
      <el-dialog title="确认打印信息" :visible.sync="printDialog" width="210mm">
        <el-table style="width: 100%;" size="mini" :max-height="370" :data="tableData" id="fmlprint">
          <el-table-column
            v-for="(item,index) in printConfig"
            :key="index"
            :width="item.width || 'auto'"
            :min-width="item.minWidth || '100'"
            :align="item.align || 'left'"
            :prop="item.prop"
            :label="item.label">
            <template slot-scope="scope">
              <i :class="item.icon" v-if="item.showCloumn"></i>
              <span style="margin-left:5px" v-if="!item.showImg">{{ scope.row[item.prop] }}</span>
              <img :src="scope.row[item.prop] "
                v-else
                @click="dialogVisible=true;showImgSrc=scope.row[item.prop]"
                style="height:40px">
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer no-print">
          <el-button @click="printDialog=false" size="small">取 消</el-button>
          <el-button type="primary" size="small" v-print="'#fmlprint'">打 印</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>
<script lang="ts">
  import {Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import { State } from "vuex-class"
  import { fmlCom } from "../utils";
  @Component({
    components:{}
  })
  export default class fmlHandleBtn extends Vue{
    total:string='导出时间长短由网络及导出数量而定';//
    tableData:any=[];//打印的列表数据
    printDialog:boolean=false;//打印弹窗
    uuid:string='';//导出轮询
    extralLoading:boolean=false;//轮询加载
    inter:any=null;//轮询定时器
    exportInterVal:string='';//轮询查看导出是否完毕接口
    exportOver:string='exportOver';//数据导出完毕下载excel

    @Prop()
    printConfig: any; //打印列表头
    @Prop()
    btnConfig: any; //操作按钮对象
    @Prop()
    delApi: any; //删除接口
    @Prop()
    exportApi: string; //导出接口
    @Prop()
    exportUuid: any; //获取导出的uuid
    @Prop()
    handleParam: any //操作按钮传递的参数

    @State selectRows:any;

    get Config():any{
      return this.btnConfig
    }

    actionHandle(item) {
    // 获取当前操作按钮
    this.$emit("getHandleState", item.state, item.dialogType);
    let Api = "";
    let tip='';
    // 1导出 2打印 3新增 4删除 5刷新 7图表
    if (item.state == 1) {
      //当列表为空时，没必要响应导出
      if (!this.$store.state.outImport) {
        item.loading = false;
        return this.$message({ type: "warning", message: "暂无可导的数据",showClose:true });
      }
      // 判断是否有删选条件避免数据过多造成导出过久
      let searchParam = fmlCom.dealObjectValue(this.searchParam);
      if (Object.values(searchParam).length <= 0 && this.selectRows.length <= 0) {
        return this.$message({
          showClose:true,
          message: "为了保证导出速度，请先对数据进行删选，在进行导出",
          type: "warning"
        });
      }
      Api = this.exportApi;
      tip = '请先确定是否有进行数据的删选，导出所有数据的这个过程可能会很慢';
    }
    // 打印
    else if (item.state == 2) {
      if (this.selectRows.length <= 0) {
        this.$message({ type: "warning", message: "请选择要打印的数据",showClose:true });
        return;
      }
      this.printDialog = true;
      this.tableData = this.selectRows;
    }
    // 新增
    else if (item.state == 3) {
      this.$store.commit("setDialogType",'add');
      this.$store.commit("setDialogVisible", true);
    }
    // 删除
    else if (item.state == 4) {
      if (this.selectRows.length>0) {
        Api = this.delApi;
        tip = '确定删除当前数据吗？删除后将无法恢复';
      } else {
        this.$message({ type: "warning", message: "请选择要删除的数据",showClose:true });
        return;
      }
    }
    // 刷新
    else if (item.state == 5) {
      this.$store.commit("setUpdateTable");
    }
     // 图表
    else if(item.state==7){
      if(this.selectRows.length<=0)
      return this.$message({type:'warning',message:'暂无可查看的图表数据',showClose:true})
      this.$store.commit('setEchartDialog',true)
    }
    if (item.state == 2 || item.state == 3 || item.state == 5||item.state==7) return;
    // 导出1 删除4
    fmlCom.confirmTips(this, tip, btn => {
      if (btn == "confirm") {
        //如果请求接口成功通知列表更新数
        this.handleService(Api, item);
      }
    });
  }
  // 特殊的导出
  async exportHandleUuid(item) {
    item.loading = true;
    this.extralLoading = true;
    let Api = this.exportApi;
    // 拿到uuid
    const [err, res] = await this.$fetchService.fetchPost(this.handleParam,'exportUuid',false);
    if (err) {
      item.loading = false;
      this.extralLoading = false;
      return this.$message({message:err.message || "操作失败",showClose:true,type:'error'});
    }
    if (!res) {
      item.loading = false;
      this.extralLoading = false;
      return this.$message({message:"其他错误",showClose:true,type:'error'});
    }
    this.uuid = res.uuid;
    this.total = "正在导出中，请稍等......";
    let _this = this;
    this.$alert("导出正在后台运行，成功后会在浏览器下方提示", "提示", {
      confirmButtonText: "好的",
      callback: action => {
        item.loading = false;
        this.extralLoading = false;
      }
    });
    this.inter = setInterval(function() {
      _this.exportHandleInter(item);
    }, 2000);
  }
  // 轮询
  async exportHandleInter(item) {
    let that = this;
    const [err, res] = await this.$fetchService.fetchGet({ uuid: that.uuid },that.exportInterVal,false);
    if (err) {
      item.loading = false;
      this.extralLoading = false;
      return that.$message({message:err.message || "操作失败",showClose:true,type:'error'});
    }
    // 导出完毕
    if (String(res.records.successs) == "0") {
      this.$message({ type: "success", message: "导出成功，注意浏览器下方",showClose:true });
      this.$fetchService.fetchDownLoad({ uuid: that.uuid },that.exportOver,false)//导出
      clearInterval(that.inter); //关闭定时器
    }
  }
  // 接口处理
  async handleService(Api, item) {
    item.loading = true;
    // 这里是处理导出
    if (item.state == 1) {
      if (item.extralHandle) {
        this.exportHandleUuid(item); //轮询导出
      } else {
        this.$fetchService.fetchDownLoad(this.handleParam,Api,false)//导出
      }
      item.loading = false;
      return;
    }
    // 导出之外的
    const [err] = await this.$fetchService.fetchDelete(this.handleParam,Api,true);
    if (err) {
      item.loading = false;
      return this.$message({message:err.message || "操作失败",showClose:true,type:'error'});
    }
    item.loading = false;
    this.$message({
      showClose:true,
      type: "success",
      message: "删除成功"
    });
    // 删除重新渲染列表
    this.$store.commit("setUpdateTable");
  }
  created() {
    this.btnConfig.btnData.map(item => {
      if (item.state == 5) return;
      // 按钮添加权限
      item["btnper"] = { url: this.$route.path, btnUrl: item.btnUrl };
    });
  }
}
</script>


